<template>
  <div class="perface-wrap">
		<div class="back-wrap" @click="handleBack"><i class="iconfont icon-back-new"></i>返回</div>
		<div class="bg-bottom"></div>
		<div class="roof"></div>
		<div class="text-wrap" >
			<a v-for="(perfaceItem, index) of perfaceText" :name="'anchors' + index" :key="index"  class="anchors" :id="'anchors' + index">
				<div class="userImg" v-if="index === 0"></div>
				<div ref="textWrap" :class="{'excludeStyle': perfaceShowText !== perfaceText[0]}" >
					<p class="title">{{perfaceItem.title}}</p>
					<p class="assistTitle">{{perfaceItem.assistTitle}}</p>
					<p class="text" v-for="(item, index) in perfaceItem.content" :key="'key' + index">{{item}}</p>
					<p class="assistContent" v-for="(item, index) in perfaceItem.assistContent" :key="'content' + index">{{item}}</p>
				</div>
				<div :class="{'separator': index != 4}"></div>
			</a>
		</div>
		<div class="lineargradient" :class="{'excludeStyle': perfaceShowText !== perfaceText[0]}"></div>
		<a  ref="prevBtn" @click="handlePrev"  class="toggle-btn left" :class="{'iPhonex': $utils.isIphoneX()}"  v-if="clickNum != 0">上一篇</a>
		<router-link to="/catalog" class="enter" :class="{'iPhonex': $utils.isIphoneX()}"></router-link>
		<a  ref="nextBtn"  @click="handleNext" class="toggle-btn right"  :class="{'iPhonex': $utils.isIphoneX()}" v-if="clickNum != 4">下一篇</a>
  </div>
</template>
<script>
	import perfaceText from './perfaceText.js'
  export default {
    data() {
      return {
				perfaceText: perfaceText,
				perfaceShowText: perfaceText[0],
				clickNum: 0,
      }
    },
		methods: {
			handleBack() {
				this.$router.back();
			},
			handlePrev() {
				this.clickNum--;
				this.perfaceShowText = perfaceText[this.clickNum];
				this.$refs.prevBtn.href = '#anchors' + this.clickNum
			},
			handleNext() {
				this.clickNum++;
				this.perfaceShowText = perfaceText[this.clickNum];
				this.$refs.nextBtn.href = '#anchors' + this.clickNum	
			},
		},
		mounted() {
			let io = new IntersectionObserver((entries) => {
				entries.forEach((entr, index) => {
					if (entr.intersectionRatio > 0) {
						this.clickNum = parseInt(entr.target.id.slice(7, 8))
					}
				})
			})
			let anchors = document.querySelectorAll('.anchors');
			anchors.forEach((ans, index) => {
				io.observe(ans);
			})
		},
		async created() {
			// 预先加载分类页图片
			let res = await this.$http.get('/lovelorn/v1.3/pb/museum-classifys/action/list', 
			{	params: { pageSize: 20, pageNo: 1}});
		}
  }
</script>
<style>
  .perface-wrap {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: url('./assets/page-bg.png') repeat left top ;
		background-size: cover;
		position: relative;

		& .back-wrap {
			position: absolute;
			top: 0.8rem;
			left: 0.3rem;
			z-index: 3;
			color: #765c37;
			font-size: 0.3rem;
			& .iconfont.icon-back-new {
				margin-right: 0.1rem;
			}
		}
				

		& .roof {
			background: url('./assets/perface-roof.png') no-repeat center;
			background-size: contain;
			width: 1.7rem;
			height: 1.93rem;
			position: absolute;
			top: 0.6rem;
			right: 0;
		}

		& .bg-bottom {
			width: 100vw;
			height: 3.45rem;
			background: url('./assets/bg-bottom.png') no-repeat center;
			background-size: cover;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
		}

		& .userImg {
			width: 4.42rem;
			height: 2.22rem;
			margin: 0 auto 0.34rem;
			background: url('./assets/user-img.png') no-repeat center;
			background-size: contain;
		}
		& .lineargradient {
			position: relative;
			z-index: 2;
			width: 100vw;
			height: 1.5rem;
			top: -0.5rem;
			background: linear-gradient(to top, #f3f3ee, rgba(243,243,238,0.4));
			&.excludeStyle {
				top: -0.3rem;
			}
		}

    & .text-wrap {
			position: relative;
			margin-top: 1.5rem;
      height: 78vh;
      width: 100%;
      overflow: scroll;
      padding: 0 0.6rem;
      color: #65461e;
			-webkit-overflow-scrolling:touch;
			&.excludeStyle {
				margin-top: 1.6rem;
				height: calc(60vh + 1.9rem)
			}
			
			& p:last-child {
				padding-bottom: 0.5rem;
			}

      & .title {
        font-size: 0.42rem;
        text-align: center;
				font-weight: 700;
      }
			& .assistTitle {
				text-align: center;
				font-size: 0.3rem;
				font-weight: 700;
				margin-bottom: 0.2rem;
			}

			& .assistContent {
				font-size: 0.24rem;
				text-align: right;
			}
      & .text {
        margin-top: 0.1rem;
        font-size: 0.3rem;
        text-align: justify;
        /* color: #65461e; */
        line-height: 0.45rem;
        text-indent: 0.6rem;
      }
    }

		& .enter {
			position: absolute;
			bottom: 0.32rem;
			left: 50%;
			margin-left: -2.05rem;
 			width: 4.1rem;
			height: 0.8rem;
			background: url('./assets/enter.png') no-repeat center;
			background-size: contain;
			z-index: 3;
			&.iPhonex {
				bottom: 1.2rem;
			}
		},
		& .toggle-btn {
			position: absolute;
			bottom: 0.54rem;
			color: #9e8358;
			font-size: 0.28rem;
			width: 0.96rem;
			height: 0.42rem;
			line-height: 0.42rem;
			text-align: center;
			display: inline-block;
			z-index: 3;
			&.iPhonex {
				bottom: 1.4rem;
			}

			&.left {
				left: 0.4rem;
			}

			&.right {
				right: 0.4rem;
			}
		}

		& .separator {
			width: 4.82rem;
			height: 0.22rem;
			margin: 0 auto;
			margin-top: 0.4rem;
			margin-bottom: 0.9rem;
			background: url('./assets/gap-line.png') no-repeat center;
			background-size: contain;
		}
		
  }
</style>
